<template>
  <div id="supervisionInformationDetail" v-loading="mainLoading" class="app-container">
    <div class="mainBox">
      <div class="leftBox">
        <div class="leftBox_title">监管信息</div>
        <div class="leftBox_title_sub">
          <!-- <div class="leftBox_title_sub_piankuai leftBox_title_sub_text"><span>片块名：</span>{{pageData.landName}}</div> -->
          <div class="leftBox_title_sub_shijian leftBox_title_sub_text">
            <span>{{title}}时间：</span>
            {{pageData.time}}
          </div>
        </div>
        <div class="leftBox_line"></div>
        <div class="fujianBox">
          <div class="fujianList" v-if="list.length!=0">
            <div class="fujianList_item" v-for="(item,index) in list" :key="index">
              <div class="fujianList_item_left">{{item.name}}</div>
              <div class="fujianList_item_right" @click="seeImg(item, index)">查看</div>
            </div>
          </div>
          <div class="fujianList fujianNoData" v-else>暂无数据</div>
        </div>
      </div>
      <div class="rightBox">
        <tdMap
          style="height: 600px"
          class="mapBox_right"
          ref="tdMap"
          :pkList="mainDataData"
          :isShowControls="false"
        />
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="imgShow" :before-close="handleClose" class="imgDaolig">
      <div class="imgBox" style="width:500px;height:500px;margin:0 auto;" v-if="showImgType==1">
        <img style="width:100%;height:100%;" :src="baseUrl+imgSrc" alt />
      </div>
      <div class="imgBox" style="width:700px;height:400px;margin:0 auto;" v-if="showImgType==2">
        <video
          id="showVedio"
          autoplay
          controls
          style="width:100%;height:100%;"
          :src="baseUrl+imgSrc"
        ></video>
      </div>
      <div class="imgBox" style="width:700px;height:400px;margin:0 auto;" v-if="showImgType==3">
        <audio
          id="showAudio"
          autoplay
          controls
          style="width:100%;height:100%;"
          :src="baseUrl+imgSrc"
        ></audio>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import config from "@/config/index.js";
import { getDetail,redlineData } from "@/api/feasibilityStudy/supervisionInformation.js";
// import { getLandStatusMapAuditInfo } from "@/api/siteSurveyEarlyStage";
import mapInit from "@/api/mapConfig";
import tdMap from "@/components/tdMap";
export default {
  components: {
    tdMap
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      //综合监管信息附件类型切换
      title: "查看图片",
      imgSrc: "",
      imgShow: false,
      mainLoading: false,
      list: [],
      total: 0, //总数
      mainData: {
        coorDonate: []
      },
      checked: true,
      checked1: true,
      checked2: true,
      checked3: true,
      checked4: true,
      checked5: true,
      nowType: 1,

      pageData: {
        title: "",
        time: ""
      },
      showImgType: "", //区别视频或者图片 1 图片 2 视频 3 音频

      mainDataData: [],
      baseUrl: config.baseUrl //文件地址
    };
  },
  created() {
    //初始化赋值
    this.pageData.time = this.$route.query.time;
    this.pageData.title = this.$route.query.title;
    this.getDetail();
    this.getDitu();
  },
  methods: {
    getDitu() {
      //获取地图
      var data = {
        projectId: localStorage.getItem("projectId")
      };
      redlineData(data).then(res => {
        let obj = res.data;
        let array = [];
        array.push(obj);
        this.mainDataData = array;
      });
    },
    handleClose() {
      this.imgShow = false;
      var vedio = document.getElementById("showVedio");
      if (vedio) {
        vedio.currentTime = 0;
        vedio.pause();
      }
      var audio = document.getElementById("showAudio");
      if (audio) {
        audio.currentTime = 0;
        audio.pause();
      }
    },
    //查看图片
    seeImg(row) {
      this.imgShow = true;
      this.imgSrc = row.path;
      this.showImgType = row.type;
      if (row.type === 1) {
        this.title = "查看图片";
      } else if (row.type === 2) {
        this.title = "查看视频";
        this.$nextTick(() => {
          var vedio = document.getElementById("showVedio");
          vedio.play();
        });
      } else if (row.type === 3) {
        this.title = "收听音频";
        this.$nextTick(() => {
          var audio = document.getElementById("showAudio");
          audio.play();
        });
      }
    },
    //获取详情
    getDetail() {
      this.mainLoading = true;
      getDetail(JSON.parse(localStorage.getItem("detailData")))
        .then(res => {
          
          this.mainLoading = false;
          var imageGeShi = ["bmp", "pcx", "png", "jpg", "jpeg", "gif", "tiff","BMP", "PCX", "PNG", "JPG", "JPEG", "GIF", "TIFF"];
          var vcrGeShi = [
            "mp4",
            "avi",
            "flv",
            "rmvb",
            "mkv",
            "mov",
            "rm",
            "3gp"
          ];
          var videoGeShi = [
            "mp3",
            "wma",
            "avi",
            "rm",
            "rmvb",
            "flv",
            "mpg",
            "mov",
            "mkv"
          ];
          var mainList = [];
          var mainList1 = [];
          var mainList2 = [];
          res.data.rows.forEach((item, index) => {
            imageGeShi.forEach(item1 => {
              if (
                item.fileKey.substring(
                  item.fileKey.indexOf(".") + 1,
                  item.fileKey.length
                ) == item1
              ) {
                var index = item.fileKey.indexOf(".");
                var photoType = item.fileKey.substring(
                  index,
                  item.fileKey.length
                );
                mainList.push({
                  name: "外业核查照片",
                  path: item.filePath,
                  type: 1,
                  flieType: photoType
                });
              }
            });
          });
          res.data.rows.forEach((item, index) => {
            vcrGeShi.forEach(item1 => {
              if (
                item.fileKey.substring(
                  item.fileKey.indexOf(".") + 1,
                  item.fileKey.length
                ) == item1
              ) {
                var index = item.fileKey.indexOf(".");
                var vcrType = item.fileKey.substring(
                  index,
                  item.fileKey.length
                );
                mainList1.push({
                  name: "核查现场视频",
                  path: item.filePath,
                  type: 2,
                  flieType: vcrType
                });
              }
            });
          });
          res.data.rows.forEach((item, index) => {
            videoGeShi.forEach(item1 => {
              if (
                item.fileKey.substring(
                  item.fileKey.indexOf(".") + 1,
                  item.fileKey.length
                ) == item1
              ) {
                var index = item.fileKey.indexOf(".");
                var vedioType = item.fileKey.substring(
                  index,
                  item.fileKey.length
                );
                mainList2.push({
                  name: "语音",
                  path: item.filePath,
                  type: 3,
                  flieType: vedioType
                });
              }
            });
          });
          //名称处理
          mainList.forEach((item, index) => {
            item.name = item.name + (index != 0 ? index : "") + item.flieType;
          });
          mainList1.forEach((item, index) => {
            item.name = item.name + (index != 0 ? index : "") + item.flieType;
          });
          mainList2.forEach((item, index) => {
            item.name = item.name + (index != 0 ? index : "") + item.flieType;
          });

          this.list = [...mainList, ...mainList1, ...mainList2];
          console.log(this.list,"数组；ieboo")
          
        })
        .catch(error => {
          this.mainLoading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
#supervisionInformationDetail {
  padding: 30px;
  box-sizing: border-box;
  padding-left: 130px;
  padding-right: 100px;
}
#supervisionInformationDetail .boxItem {
  width: 100%;
  background-color: #fff;
}
#supervisionInformationDetail .boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
#supervisionInformationDetail .boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
#supervisionInformationDetail .boxItem_content_row {
  display: flex;
  align-items: center;
}
#supervisionInformationDetail .boxItem_content_row_item {
  display: flex;
  align-items: center;
}
#supervisionInformationDetail .boxItem_content_row_item {
  margin-right: 30px;
}
#supervisionInformationDetail .boxItem_content_row_item p {
  font-size: 14px;
  line-height: 36px;
}
#supervisionInformationDetail .boxItem_content_row_item p:first-child {
  color: #444;
  font-weight: bold;
}
#supervisionInformationDetail .boxItem_content_row_item p:last-child {
  color: #666;
}
#supervisionInformationDetail .uploadDownLoadBox_item p {
  width: 140px;
}
#supervisionInformationDetail .button_box {
  margin-top: 30px;
}
#supervisionInformationDetail .button_box_item {
  margin-right: 10px;
}
#supervisionInformationDetail .errorBox /deep/ .el-dialog {
  width: 800px;
}
#supervisionInformationDetail .piankuaixinxi .title {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
  border-top: none;
}
#supervisionInformationDetail .piankuaixinxi .title1 {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
}
#supervisionInformationDetail .boxTitle {
  margin-bottom: 30px;
}
#supervisionInformationDetail .boxTitle .boxTitle_title {
  font-size: 20px;
  font-weight: bold;
  color: #444;
  text-align: center;
}
#supervisionInformationDetail .boxTitle_time {
  font-size: 14px;
  color: #999;
  margin-top: 20px;
  margin-bottom: 30px;
}
#supervisionInformationDetail .checkOut_item {
  margin-bottom: 10px;
}
#supervisionInformationDetail
  /deep/
  .el-checkbox__input.is-disabled
  + span.el-checkbox__label {
  border-color: #409eff;
}
#supervisionInformationDetail
  /deep/ .el-checkbox__input.is-disabled.is-checked
  /deep/ .el-checkbox__inner {
  border-color: #409eff;
  background-color: #409eff;
}
#supervisionInformationDetail
  /deep/ .el-checkbox__input.is-disabled.is-checked
  /deep/ .el-checkbox__inner::after {
  border-color: #fff;
}
#supervisionInformationDetail
  /deep/ .el-checkbox__input.is-disabled
  + span.el-checkbox__label {
  color: #12203e;
}
#supervisionInformationDetail .imgDaolig /deep/ .el-dialog {
  width: 800px;
}

.mainBox {
  width: 100%;
  display: flex;
}
.leftBox {
  width: 40%;
}
.leftBox_title {
  color: #4d4d4d;
  font-size: 18px;
  font-weight: bold;
  line-height: 25px;
}
.leftBox_title_sub {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.leftBox_title_sub .leftBox_title_sub_piankuai {
  margin-right: 40px;
}
.leftBox_title_sub .leftBox_title_sub_text {
  color: #595959;
  font-size: 14px;
}
.leftBox_title_sub_text span {
  color: #737373;
}
.leftBox_line {
  width: 80%;
  height: 1px;
  background: rgba(235, 238, 245, 1);
  opacity: 1;
  margin-top: 30px;
  margin-bottom: 14px;
}
.fujianBox_tabs {
  display: flex;
  align-items: center;
}
.fujianBox_tabs_item {
  width: 60px;
  height: 28px;
  background: #f0f3f5;
  opacity: 1;
  border-radius: 2px;
  color: #696969;
  font-size: 14px;
  margin-right: 8px;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
}
.fujianBox_tabs_item.on {
  background: #409eff;
  color: #fff;
}
.fujianList {
  width: 70%;
  margin-top: 14px;
}
.fujianList_item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 56px;
  line-height: 56px;
}
.fujianList_item .fujianList_item_left {
  color: #606266;
  font-size: 14px;
}
.fujianList_item .fujianList_item_right {
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
}
.rightBox {
  width: 45%;
}
.fujianNoData {
  text-align: center;
  margin-top: 50px;
  letter-spacing: 8px;
  color: #696969;
}
</style>
